<template>
    <div>
        <iview-table
            ref="table"
            :span1="14"
            :span2="10"
            :baseURL="queryModel.baseURL"
            :menuId="dataModel.menuId"
            :columns="dataModel.columns"
            :order="dataModel.order"
            :pageNumber="pageModel.pageNumber"
            :pageSize="pageModel.pageSize"
            :defaultFilters="queryModel.defaultFilters"
            v-on="{changeTotalSize:changeTotalSize,events:events,changeSelect:changeSelect}">
        </iview-table>
        <Modal v-model="showModal" :closable='false' :mask-closable=true :width="400">
            <h3 slot="header" style="color:#2D8CF0">选择分类</h3>
            <Row>
                <Col span="20" offset="2">
                    <Form ref="formItem" :model="formItem" :rules="ruleForm" :label-width="60">
                        <FormItem label="分类：" prop="categoryId">
                            <Select v-model="formItem.categoryId" style="width: 100%" :label-in-value=true @on-change="changeCategory">
                                <Option v-for="item in categorys" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="折扣：" prop="discount">
                            <InputNumber v-model="formItem.discount" style="width: 100%" :min="0">0</InputNumber>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="info" size="large" @click="save">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    import productList from '@/view/basic/info/list/ProductList.vue';
    export default {
        components: {
            iviewTable,
            iviewPage,
            productList
        },
        props: {
            homeId: {
                type: Number,
                default: -1
            }
        },
        data () {
            return {
                baseURL: '/user/home/discount/product',
                categoryURL: '/user/category',
                selectRows: [],
                categorys: [],
                formItem: {
                    id: '',
                    homeId: '',
                    categoryId: '',
                    categoryName: '',
                    discount: '',
                    parentId: ''
                },
                ruleForm: {
                    categoryId: [
                        { required: true, message: '请选择分类', pattern: /.+/, trigger: 'change' }
                    ],
                    discount: [
                        { required: true, message: '请填写折扣', pattern: /.+/, trigger: 'change' }
                    ]
                },
                queryModel: {
                    // 网关代理路径(必须)+资源路径(可选)
                    baseURL: '/user/home/discount/product',
                    defaultFilters: [
                        {'field': 'home_id', 'value1': -1, 'operate': '=='},
                        {'field': 'parent_id', 'operate': 'IS NULL'}
                    ]
                },
                dataModel: {
                    menuId: 2655,
                    columns: [
                        {
                            title: '分类名称',
                            key: 'categoryName'
                        },{
                            title: '折扣率',
                            key: 'discount',
                            width: 200,
                            render: (h, params) => {
                                let temp = params.row.discount
                                if (temp === 0) {
                                    temp = '—'
                                } else {
                                    temp += '折'
                                }
                                return temp
                            }
                        },{
                            title: '操作',
                            align: 'center',
                            width: 200,
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.select(params.row)
                                            }
                                        }
                                    }, '添加小类')
                                ]);
                            }
                        }
                    ],
                    order: 'id desc'
                },
                pageModel: {
                    totalSize: 0,
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizeOpts: [10, 50, 100, 500]
                },
                showModal: false,
                status: false
            };
        },
        methods: {
            events (item) {
                let path = item.path
                if (path === 'add') {
                    this.add()
                } else if (path === 'delete') {
                    this.delete()
                }
            },
            add () {
                this.loadCategory()
                this.showModal = true
            },
            delete () {
                if (this.selectRows.length > 0) {
                    let ids = []
                    for (let row of this.selectRows) {
                        ids.push(row.id)
                    }
                    if (ids.length === 1) {
                        this.doDelete(ids)
                    } else {
                        this.$Modal.confirm({
                            title: '操作提示',
                            content: '<p>确认删除'+ids.length+'条记录?</p>',
                            onOk: () => {
                                this.doDelete(ids)
                            }
                        })
                    }
                } else {
                    this.$bus.alert('warning', '请至少选择一条记录')
                }
            },
            doDelete (ids) {
                let url = this.baseURL + '/delete'
                this.$ajax.post(url, ids).then((response) => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', msg)
                        this.refresh()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                });
            },
            select (row) {
                this.formItem.parentId = row.id
                let url = this.categoryURL + '/findByParentId/' + row.categoryId
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.categorys = data
                        this.showModal = true
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            save () {
                this.$refs['formItem'].validate((valid) => {
                    if (valid) {
                        this.formItem.homeId = this.homeId
                        let url = this.baseURL + '/saveOrUpdate'
                        this.$ajax.post(url, this.formItem).then((response) => {
                            let {code, msg} = response.data
                            if (code === 0) {
                                this.$bus.alert('success', '保存成功')
                                this.showModal = false
                                this.refreshSmallClassList()
                                this.init()
                            } else {
                                this.$bus.alert('error', msg)
                            }
                        })
                    }
                })
            },
            loadCategory () {
                let url = this.categoryURL + '/findBigClass'
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.categorys = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            changeCategory (option) {
                this.formItem.categoryId = option.value
                this.formItem.categoryName = option.label
            },
            refresh () {
                this.$refs.table.refresh()
            },
            refreshSmallClassList () {
                this.$emit('refreshSmallClassList')
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            init () {
                this.$bus.init(this.formItem)
            }
        },
        mounted () {
            this.loadCategory()
        },
        watch: {
            homeId: function (val, oldVal) {
                this.queryModel.defaultFilters[0] = {'field': 'home_id', 'value1': val, 'operate': '=='}
            }
        }
    }
</script>

<style>

</style>
